<template>
  <div class="home">
    <van-nav-bar title="首页" class="van_bar" />
    <div class="content">
      <div class="box">
        <van-divider content-position="left">我的学习进度</van-divider>
        <div class="circle" v-if="id">
          <van-circle
            v-model="currentRate"
            :rate="rate"
            layer-color="#ebedf0"
            :text="rate+'%'"
            :speed="100"
          />
        </div>
        <div class="circle" v-else>
          <van-circle
            v-model="currentRate"
            :rate="rate"
            layer-color="#ebedf0"
            :text="0+'%'"
            :speed="100"
          />
        </div>
        <van-divider content-position="left">我的考试成绩</van-divider>
        <div v-show="!token">
          <van-divider>请登录后查看考试成绩</van-divider>
          <van-button type="info" size="large" @click="dengFn">登录</van-button>
        </div>
        <div v-show="token">
          <date @change="changeFn" />
          <div v-show="isif">
            <div id="main" style="width:330px;height:400px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapActions } from "vuex";
// @ is an alias to /src
import date from "../components/date";
import HelloWorld from "@/components/HelloWorld.vue";
import { getStorage } from "../utils/storage";
import { mapActions, mapState } from "vuex";
import { mendZero } from "../utils/commonality";

export default {
  name: "home",
  layout: "layoutMain",

  components: {
    HelloWorld,
    date
  },
  data() {
    return {
      currentRate: 0,
      getId: 0,
      isShow: false,
      isif: false
      // rate:0
    };
  },
  computed: {
    ...mapState("user", ["id", "roles","token"]),
    ...mapState("panel", ["names", "datas", "series","dts"]),
    rate() {
      return Math.round((this.getId / this.total) * 100);
    },
    total() {
      return this.$store.state.msbd.total;
    },
    id() {
      return this.$store.state.user.id;
    }
  },
  methods: {
    dengFn() {
      this.$router.push("./login");
    },
    ...mapActions("msbd", ["getList"]),
    ...mapActions("panel", ["getPanel"]),
    async changeFn(date) {
      let y = date.getFullYear();
      let m = mendZero(date.getMonth() + 1); //, uid: this.id
      if (this.roles == "admin") {
        var arr = await this.getPanel({ date: y + "-" + m });
      } else {
        var arr = await this.getPanel({ date: y + "-" + m, uid: this.id });
      }
      this.drawChart();
      var myChart = document.getElementById("main");
      myChart.removeAttribute("_echarts_instance_");
      if (!arr.length) {
        this.isif = false;
        this.$notify({
          type: "warning",
          message: "本月没有数据",
          duration: 500
        });
      } else {
        this.isif = true;
      }
    },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        // title: {
        //   text: "折线图堆叠"
        // },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: this.names
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.dts
        },
        yAxis: {
          type: "value"
        },
        series: this.series
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  async mounted() {
    await this.getList();
    this.getId = getStorage().length;
    let dt = new Date();
    let y = dt.getFullYear();
    let m = mendZero(dt.getMonth() + 1);
    console.log(this.id);
    // if (this.id == 0) {
    //   this.isShow = false;
    // } else {
    //   this.isShow = true;
    // }
    // console.log(this.isShow);

    if (this.roles == "admin") {
      var ar = await this.getPanel({ date: y + "-" + m });
    } else {
      var ar = await this.getPanel({ date: y + "-" + m, uid: this.id });
    }
    if (!ar.length) {
      this.isif = false;
      this.$notify({
        type: "warning",
        message: "本月没有数据",
        duration: 500
      });
    } else {
      this.isif = true;
    }
    this.drawChart();
    var myChart = document.getElementById("main");
    myChart.removeAttribute("_echarts_instance_");
  }
};
</script>

<style scoped>
.content {
  position: absolute;
  top: 46px;
  bottom: 50px;
  overflow-y: auto;
  width: 100%;
}
.box {
  margin: 10px;
}
.circle {
  text-align: center;
}
</style>
